<script setup lang="ts">
import { addCartItme } from "@/api/cart/cartItem";
import { deleteOrder, getOrderList, upOrder } from "@/api/order/order";
import router from "@/router";
import type { order } from "@/types";
import { getRouteParam } from "@/utils/ruoyi";
import type { TabsPaneContext } from "element-plus";
import { ref } from "vue";
import { useRoute } from "vue-router";
interface CartItem {
  productId: number | null;
  quantity: number;
  priceSnapshot: number | null;
  addedAt: string;
  isChosen: number;
}
const cartItem = ref<CartItem>({
  productId: null,
  quantity: 1,
  priceSnapshot: null,
  addedAt: "",
  isChosen: 0,
});
const loading = ref(false);
const route = useRoute();
const activeName = ref("0");
const tableData = ref<order[]>([]);
// 点击tab时触发
const tabClick = (pane: TabsPaneContext, ev: Event) => {
  router.push("/myComments?s=" + pane.paneName);
};
function loadOrders() {
  activeName.value = getRouteParam(route, "s", "0");
}
async function load() {
  loading.value = true;
  await getOrderList({ status: 3 }).then((response) => {
    tableData.value = response.data.data;
  });
  loading.value = false;
}
//删除订单
const deleteOrderButton = async (orderId: string) => {
  await deleteOrder(orderId);
  load();
};
//立即购买按钮
const addCartItemButton = async (orderItemList: any) => {
  orderItemList.forEach(async (item: any) => {
    cartItem.value.productId = item.productId;
    await addCartItme(cartItem.value);
  });
  router.push("/cart");
};
//确认收货按钮
const confirmReceipt = async (item: order) => {
  item.status = 3;
  await upOrder(item);
  load();
};
loadOrders();
load();
</script>
<template>
  <el-tabs @tab-click="tabClick">
    <el-tab-pane label="待评价订单" name="0" v-loading="loading">
      <div class="table" v-if="tableData.length > 0">
        <div class="table-header">
          <el-row>
            <el-col :span="16">
              <span style="margin-left: 200px">订单详情</span>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span>收货人</span>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span>金额</span>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span>状态</span>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span>操作</span>
            </el-col>
          </el-row>
        </div>
        <div class="table-data" v-for="item in tableData">
          <div class="table-header">
            <el-row>
              <el-col :span="16">
                <span style="margin-left: 10px">{{ item.createTime }}</span>
                <span style="margin-right: 10px"></span>
                <span>订单号:{{ item.orderId }}</span>
              </el-col>
              <el-col :span="8" style="text-align: right">
                <el-popconfirm
                  v-if="item.status === 2"
                  title="确定要删除订单吗？"
                  @confirm="deleteOrderButton(item.orderId)"
                >
                  <template #reference>
                    <el-button link type="primary" size="small" style="margin-right: 26px"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="16">
              <el-row>
                <el-col :span="24" v-for="data in item.orderItemList">
                  <div class="goods-box" style="padding: 10px">
                    <el-row>
                      <el-col :span="4">
                        <div style="display: inline-block">
                          <el-link
                            :href="'/product/detail/' + data.product.productId"
                            :underline="false"
                            target="_blank"
                          >
                            <el-image
                              style="width: 100px; height: 100px"
                              :src="data.product.img"
                              fit="fill"
                            />
                          </el-link>
                        </div>
                      </el-col>

                      <el-col :span="12">
                        <div>
                          <el-link
                            :href="'/product/detail/' + data.product.productId"
                            :underline="false"
                            target="_blank"
                            >{{ data.product.name }}</el-link
                          >
                        </div>
                        <div>
                          <el-link
                            :href="'/product/detail/' + data.product.productId"
                            :underline="false"
                            target="_blank"
                          >
                            {{ data.product.description }}</el-link
                          >
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div style="margin-top: 10px; margin-left: 100px">
                          x{{ data.quantity }}
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row style="height: 100%">
                <el-col :span="6" style="text-align: center">
                  <div class="border-box">
                    <div style="padding: 10px">{{ item.addressName }}</div>
                  </div>
                </el-col>
                <el-col :span="6" style="text-align: center">
                  <div style="padding: 10px">￥{{ item.totalAmount }}</div>
                  <el-divider />
                  <span>在线支付</span>
                </el-col>
                <el-col :span="6" style="text-align: center">
                  <div class="border-box">
                    <div style="padding: 10px">
                      <span v-if="item.status === 0">待付款</span>
                      <span v-if="item.status === 1">已支付/待发货</span>
                      <span v-if="item.status === 2">已发货</span>
                      <span v-if="item.status === 3">已收货</span>
                      <span v-if="item.status === 4">已完成</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6" style="text-align: center">
                  <div style="padding: 10px">
                    <el-button v-if="item.status === 0" link type="primary" size="small"
                      >立即付款</el-button
                    >
                    <el-button v-if="item.status === 2" link type="primary" size="small"
                      >查看物流</el-button
                    >
                    <el-popconfirm
                      v-if="item.status === 2"
                      title="确定要收货吗？"
                      @confirm="confirmReceipt(item)"
                    >
                      <template #reference>
                        <el-button link type="primary" size="small">确认收货</el-button>
                      </template>
                    </el-popconfirm>

                    <el-button
                      v-if="item.status === 3"
                      link
                      type="primary"
                      size="small"
                      @click="router.push('/appraise?orderId=' + item.orderId)"
                      >评价</el-button
                    >
                    <el-button size="small" @click="addCartItemButton(item.orderItemList)"
                      >立即购买</el-button
                    >
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-empty v-else description="没有订单">
        <el-button @click="router.push('/home')" type="primary">去逛逛</el-button>
      </el-empty>
    </el-tab-pane>
  </el-tabs>
</template>
<style lang="less" scoped>
.table {
  width: 100%;
  font-size: 11px;
  .table-header {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: aliceblue;
    font-size: 11px;
  }
  .table-data {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(202, 202, 202);
    margin-top: 10px;
    .border-box {
      height: 100%;
      border-left-style: solid;
      border-right-style: solid;
      border-width: 1px;
      border-color: rgb(202, 202, 202);
    }
    .goods-box {
      border-bottom: solid;
      border-width: 1px;
      border-color: rgb(202, 202, 202);
    }
  }
}
</style>
<style lang="less" scoped>
.el-button + .el-button {
  margin-left: 0px;
}
.el-link {
  --el-link-text-color: #000000;
}
</style>
